import HomeHeader from '../../components/Home/HomeHeader'
import {useEffect,useState} from 'react'
import { Row, Col, Carousel  } from 'antd';
import BlogItem from '../../components/Blog/BlogItem'
// import show from '../../assets/img/home/show.png'
import SupportUser from '../../components/Support/SupportUser'
import axios from '../../assets/js/intercepotr'
// import store from '../../redux/store'
import './index.less'
export default function Home(){

  const [blogList,getBlogList] = useState([])


  useEffect(()=>{
    getBlog()
    
  },[])

  const getBlog = async ()=>{
    let res = await axios.post('/api/client/blog')
    if(res.code === 200){
      // console.log(res.result)
      getBlogList(res.result.blog)
    }
  }

  const onChange = ()=>{

  }

  const contentStyle = {
    height: '360px',
    color: '#fff',
    lineHeight: '360px',
    textAlign: 'center',
    background: '#364d79',
  };

  return (
    <div className="homePage">
      <HomeHeader />
      <Row gutter={16}>
        <Col className="gutter-row navlink" span={18}>
          <div className="gutter-box showYourself cardBox">
          <Carousel afterChange={onChange}>
            <div>
              <h3 style={contentStyle}>1</h3>
            </div>
            <div>
              <h3 style={contentStyle}>2</h3>
            </div>
            <div>
              <h3 style={contentStyle}>3</h3>
            </div>
            <div>
              <h3 style={contentStyle}>4</h3>
            </div>
          </Carousel>
            {/* <div className="hotTitle">
              头条
            </div>
            <div className="flex">
              <div>
                <img src={show} width="480px" height="300px" alt="show" />
              </div>
              <div>
                <p>天才靠的都是99%的努力和1%的汗水</p>
                <p>很喜欢的一句话：永远相信，美好的事情即将发生，努力吧！</p>
              </div>
            </div> */}
          </div>
          {
            blogList.map(blog=>{
              return <BlogItem key={blog.blogid} blog={blog}/>
            })
          }
        </Col>
        <Col className="gutter-row" span={6}>
          <SupportUser />
        </Col>
      </Row>
    </div>
  )
}